<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="main-content">
            <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
            :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
                <div slot="form">
                    <el-form :model="query" ref="query" label-width="100px" label-position="right">
                        <el-row :gutter="40">
                            <el-col :span="9">
                                <el-form-item label="活动日期范围">
                                    <el-select v-model="query.dateRangeId"  placeholder="请选择" style="width:100%;" @change="dateChange">
                                        <el-option v-for="item in dateList" :key="item.id" :label="item.dateRange" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2" >
                                <div class="top-line">
                                    <el-button type="primary" class="btn-common" :disabled="this.dateList.length == 0" @click="onSubmit('query')">查询</el-button>
                                </div>
                            </el-col>
                        </el-row> 
                    </el-form>
                </div> 
                <div slot="eCharts2">
                    <div class="charts-title" style="margin-bottom:0;">页面转化率</div>
                    <div class="charts-display" v-loading="loading">
                        <el-row class="fun-item">
                            <el-col :span="24" align='right'>
                                <div class="fun-percent"><span class="icon-total"></span><span>总转化率：{{this.totalPercent}}</span></div>
                            </el-col>
                        </el-row>
                        <el-row style="height:400px;">
                            <el-col :span="22" :offset="1" align='center' style="height:400px;">
                                <trendChart width='100%' height='100%' :id="newBarChart" :option='newBarOption'></trendChart>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div slot="table" >
                    <div class="table-title"></div> 
                    <el-table :data="tableData" border v-loading="loading" style="width: 100%">
                        <el-table-column label="总体" align="center">
                            <template scope="scope">
                                <span>所有参与活动的用户</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="转化率" align="center">
                            <template scope="scope">
                                <span>{{scope.row.conversionRate}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="布置作业用户" align="center">
                            <template scope="scope">
                                <span>{{scope.row.finishNumber | isNull}}</span><br/>
                                <span>{{scope.row.finishPercent}}</span>
                            </template>
                        </el-table-column>
        
                        <el-table-column label="第一步未完成用户" align="center">
                            <template scope="scope">
                                <span>{{scope.row.firstNumber}}</span><br/>
                                <span>{{scope.row.firstPercent}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="完成提交人数的用户" align="center">
                            <template scope="scope">
                                <span>{{scope.row.submitNumber==null?'0':scope.row.submitNumber}}</span><br/>
                                <span>{{scope.row.submitPercent==null?'0.0%':scope.row.submitPercent}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="第二步未完成用户" align="center">
                            <template scope="scope">
                                <span>{{scope.row.secondNumber}}</span><br/>
                                <span>{{scope.row.secondPercent}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="成功领取话费的用户" align="center">
                            <template scope="scope">
                                <span>{{scope.row.receiveNumber==null?'0':scope.row.receiveNumber}}</span><br/>
                                <span>{{scope.row.receivePercent==null?'0.0%':scope.row.receivePercent}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination-container"></div>
                </div>
            </echartsLayout>
        </div>
    </div>
</template>

<script>
    import Levelbar from '../../layout/Levelbar';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import trendChart from 'components/Charts/trendChart';
    import { findTaskDateRange, findNewTask } from 'api/manageAnalysis';
    export default{
        name: 'newbieTask',
        components: {Levelbar, echartsLayout, trendChart},
        data() {
            return {
                loading: false,
                formState: false,
                dataListState: true,
                eCharts1State: true,
                eCharts2State: false,
                eCharts3State: true,
                chartsListState: true,
                tableState: false,
                newBarChart: 'newBarChart',
                newBarOption: null,
                totalPercent: '0.0%',
                query: {
                    dateRange: null,
                    dateRangeId: null,
                    endDate: null,
                    startDate: null
                },
                dateList: [],
                tableData: []
            }
        },
        created() {
            this.getDateList();
        },
        methods: {
            getDateList() {
                findTaskDateRange().then(response => {
                    this.dateList = response.data.content;
                    this.dateList.forEach(item => {
                        item.dateRange = item.startDate.split(' ')[0] + ' - ' + item.endDate.split(' ')[0];
                    })
                    this.query.dateRangeId = this.dateList[0].id;
                    this.query.submitNumber = this.dateList[0].submitNumber;
                    this.query.startDate = this.dateList[0].startDate;
                    this.query.endDate = this.dateList[0].endDate;
                    this.queryData();
                }).catch(() => {
                    console.log('err');
                });
            },
            getBarCharts(obj) {
                let percent1 = obj.submitPercent?obj.submitPercent:'0.0%';
                let percent2 = obj.receivePercent?obj.receivePercent:'0.0%';
                this.newBarOption = {
                    color: ['#3398DB'],
                    tooltip: {
                        show: false,
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: 0,
                        containLabel: true
                    },
                    xAxis: [
                        {
                            show: false,
                            type: 'value'
                        }
                    ],
                    yAxis: [
                        {
                            show: true,
                            type: 'category',
                            data: ['成功领取话费的用户', '完成提交人数的用户', '布置作业用户'],
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false,
                                alignWithLabel: true
                            }
                        }
                    ],
                    series: [
                        {
                            name: '直接访问',
                            type: 'bar',
                            barWidth: '40%',
                            barMinHeight: 160,
                            data: [{
                                name: '成功领取话费的用户',
                                value: obj.receiveNumber,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'insideLeft',
                                        formatter: '{c} 转化率：'+percent2,
                                        fontSize: 14
                                    }
                                }
                            }, {
                                name: '完成提交人数的用户',
                                value: obj.submitNumber,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'insideLeft',
                                        formatter: '{c} 转化率：'+percent1,
                                        fontSize: 14
                                    }
                                }
                            }, {
                                name: '完成布置作业的用户',
                                value: obj.finishNumber,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'insideLeft',
                                        formatter: '{c}',
                                        fontSize: 14
                                    }
                                }
                            }],
                            itemStyle: {   
                                normal: {  
                                    color(params) {
                                        var colorList = ['#ff8181', '#cb8eff', '#8ebeff'];
                                        return colorList[params.dataIndex];
                                    }
                                }
                            }
                        }
                    ]
                };
            },
            dateChange(dateRangeId) {
                let obj = this.dateList.find((item) => {
                    return item.id === dateRangeId;
                });
                this.query.submitNumber = obj.submitNumber;
                this.query.endDate = obj.endDate;
                this.query.startDate = obj.startDate;
            },
            queryData() {
                let startDate = this.query.startDate;
                let endDate = this.query.endDate; 
                let id = this.query.dateRangeId;
                let submitNumber = this.query.submitNumber;
                this.loading = true;
                findNewTask(id, startDate, endDate, submitNumber).then(response => {
                    this.loading = false;
                    this.tableData = [];
                    let dataObj = {};
                   
                    if (response.data.content.length) {
                        
                        let obj = response.data.content[0];
                        dataObj.finishNumber = obj.finishNumber; // 布置作业用户
                        dataObj.receiveNumber = obj.receiveNumber; // 成功领取话费的用户
                        dataObj.submitNumber = obj.submitNumber; // 完成提交人数的用户
                        dataObj.finishPercent = (obj.finishNumber/obj.joinNumber*100).toFixed(1) + '%';
                        dataObj.firstNumber = obj.joinNumber - obj.finishNumber;  // 第一步未完成用户
                        dataObj.firstPercent = (dataObj.firstNumber/obj.joinNumber*100).toFixed(1) + '%';
                        dataObj.submitPercent = (obj.submitNumber/obj.finishNumber*100).toFixed(1) + '%';
                        dataObj.secondNumber = obj.finishNumber - obj.submitNumber;  // 第二步未完成用户
                        dataObj.secondPercent = !isNaN(obj.submitNumber/obj.finishNumber) ? ((1 - obj.submitNumber/obj.finishNumber)*100).toFixed(1) + '%' : '0.0%';
                        dataObj.receivePercent = (dataObj.receiveNumber/obj.submitNumber*100).toFixed(1) + '%';
                        this.totalPercent = (obj.receiveNumber/obj.finishNumber*100).toFixed(1) + '%';
                        dataObj.conversionRate = (obj.receiveNumber/obj.finishNumber*100).toFixed(1) + '%';
                        if (!obj.joinNumber) {
                            dataObj.finishPercent = '0.0%';
                            dataObj.firstPercent = '0.0%';
                            // dataObj.receivePercent = '0.0%';
                            // dataObj.submitPercent = '0.0%';
                        }
                        if (!obj.finishNumber) {
                            dataObj.submitPercent = '0.0%';
                            dataObj.conversionRate = '0.0%';
                            this.totalPercent = '0.0%';
                            dataObj.totalPercent = '0.0%';
                        }
                        if (!obj.submitNumber) {
                            dataObj.receivePercent = '0.0%';
                        }
                        dataObj.totalPercent = this.totalPercent;
                        this.tableData.push(dataObj);
                    }
                    this.getBarCharts(dataObj);
                }).catch(() => {
                    this.loading = false;
                    this.tableData = [];
                });
            },
            onSubmit(query) {
                this.$refs[query].validate((valid) => {
                    if (valid) {
                        this.queryData();
                    }
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .app-container{
        position: relative;
        padding: 20px 20px 10px;
        width: 1400px;
        margin: 0 auto;
        .main-content {
            position: relative;
            $bgcolor: #fff;
            .fun-item {
                .fun-percent {
                    width: 200px;
                    height: 60px;
                    line-height: 60px;
                    font-size: 14px;
                    color: #333;
                    .icon-total {
                        display: inline-block;
                        position: relative;
                        top: 3px;
                        width: 18px;
                        height: 15px;
                        background-image: url(../../../assets/icon-total.png);
                        background-repeat: no-repeat;
                        background-position: center center;
                        margin-right: 6px;
                    }
                }
            }
        }
    }
</style>                     
